<template>
  <div class="map-content">
    <BaseLeafletMap>
      <CountyName v-if="componentsVisible.xm"></CountyName>
      <CountyNameNew
        v-if="baseLeafletMapStore.selectCity"
        :selectCity="baseLeafletMapStore.selectCity"
      ></CountyNameNew>
      <TrafficLine v-if="trafficStore.currentTabData.type === 'old'" />
    </BaseLeafletMap>
  </div>
</template>

<script setup lang="ts">
import CountyName from '@/pages/traffic/components/map-components/countyName/index.vue'
import CountyNameNew from '@/pages/traffic/components/map-components/countyNameNew/index.vue'
import TrafficLine from '@/pages/traffic/components/map-components/trafficLine/index.vue'
import { useTrafficStore } from '@/pages/traffic/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'

const trafficStore = useTrafficStore()
const baseLeafletMapStore = useBaseLeafletMapStore()
const componentsVisible = computed(() => trafficStore.componentsVisible)
const pointType = computed(() => trafficStore.pointType)
const pointTypeList = computed(() => trafficStore.pointTypeList)

onMounted(() => {})

onUnmounted(() => {})
</script>

<style scoped lang="scss">
.map-content {
  width: 100%;
  height: 100%;
}
</style>
